<template>
	<view class="activit_box" @click="route">
		<view class="header-top">
			<view class="left">
				{{query.title}}
			</view>
			<view class="right">
				<view class="size">
					{{query.time_str}}
				</view>
				<countdown :endTimestamp="query.second" :day="query.day"></countdown>
			</view>
		</view>
		<image :src="query.image" mode="" class="image"></image>
	</view>
</template>

<script>
	import countdown from './countdown.vue'
	export default {
		props: {
			query: {
				type: Object,
				default: {},
				required: true
			},
		},
		components: {
			countdown
		},
		data() {
			return {
				route() {
					if (this.query.form == 'card') {
						uni.navigateTo({
							url: '/pageA/member/purchase?par=' + this.query.param
						})
					}

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activit_box {
		// margin-top: 24rpx;
		width: 702rpx;
		height: 336rpx;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.header-top {
			margin-bottom: -10rpx;

			width: 100%;
			height: 86rpx;
			padding: 0 24rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			background: linear-gradient(0deg, #73F0EA, #47e7dc);

			.left {
				flex: 1;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Heavy;
				font-weight: 800;
				text-align: left;
				color: #000000;
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;

				.size {
					margin-right: 12rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #000000;
				}
			}
		}

		.image {
			width: 702rpx;
			height: 270rpx;
			background: #ffffff;
			border: 2rpx solid #ffffff;
			border-radius: 16rpx;
		}
	}
</style>